<template>
  <div>
    <a-modal v-model:visible="visible" okText="发布" :title="title" @ok="handleOk" width="40%" :afterClose="closeMoadal">
      <a-form :model="formData" ref="formRef" labelAlign="right" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }"
        :rules="rules">

        <a-form-item label="标题:" name="title">
          <a-input v-model:value="formData.title" :maxlength="25" allowClear placeholder="输入标题25字以内" />
        </a-form-item>

        <a-form-item label="内容:" :rules="[{ required: true }]">
          <Fueditor @valueHtml="getvalueHtml"></Fueditor>
        </a-form-item>
        <a-form-item label="上传封面:" :rules="[{ required: true }]">
          <Upload @getImgpath="getImgpath"></Upload>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
import { addnews } from '@/common/http.api.js'
import { ref, reactive, onBeforeMount, onBeforeUnmount } from 'vue';
import Fueditor from './Fueditor.vue'
import Upload from '@/components/upload/index.vue'

const rules = reactive({ title: { required: true, message: '标题不能为空', trigger: 'blur' } })

const visible = ref(true)
const frensh = ref(0) // 表格刷新frensh.value++ 即可
const emitFrensh = defineEmits(['on-close']) // 注册事件

const getImgpath = (url) => {
  formData.img = url
}

const formData = reactive({
  title: '',
  content: '',
  img:'',
  create_name: sessionStorage.getItem('admName')
});

const getvalueHtml = (val) => {
  formData.content = val
}

const title = ref('发布资讯')

function closeMoadal() {
  emitFrensh('on-close', frensh.value)
}


const formRef = ref()
async function handleOk() {
  if (formData.content === '') return message.warning('请提交内容！')
  formRef.value
    .validate()
    .then(async () => {
      await addnews(formData)
      frensh.value++
      message.success('发布成功')
      visible.value = false;
    })
    .catch((error) => {
      console.log("error", error);
    });

}

</script>

<style lang="less" scoped>

</style>